<template>
    <div class="view-body">
        <div class="header-select header-select-sort">
            <ul class="header-select-list">
                <li v-bind:class="{'cur': type === 'latest'}" @click="selectSort('latest')">{{ $t("information_new") }}</li><!--最新-->
                <li v-bind:class="{'cur': type === 'hottest'}" @click="selectSort('hottest')">{{ $t("knowledge_hot") }}</li><!--最热-->
                <li v-bind:class="{'cur': type === 'popularity'}" @click="selectSort('popularity')">{{ $t("rank_course_type_like") }}</li><!--赞-->
            </ul>
        </div>
        <div style="height: calc(100% - 50px);" class="body-content" :class="{'height-100' : total === 0}">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                v-model="isLoading"
                :finished="finished"
                :finished-text="(finished&&total>0) ? $t('no_more') : ''"
                loding-text="loading"
                @load="getDataList"
                >
                    <div v-bind:class="{'height100' : total === 0}">
                        <ul class="white-bg module-list-11">
                            <li class="clearfix" v-for="list in knowledgeList" :key="list.kbi_id" @click="detatilJump(list.kbi_id)">
                                <span class="img-box">
                                    <img :src="appUrl + list.imageAttachment.kba_url" alt="" width="100%"/>
                                </span>
                                <div>
                                    <p class="word-clamp-2 font-size14"><span class="color999">{{ $t(list.kbi_type) }}</span><em class="point"></em>{{ list.kbi_title }}</p>
                                    <p class="color999 font-size11" style="margin-top: 7px;" v-if="type === 'latest'">
                                        {{ list.kbi_publish_datetime | formTime('splitTime') }}
                                    </p>
                                    <p class="color999 font-size11" style="margin-top: 7px;" v-if="type === 'hottest'">
                                        <em class="browse-icon"></em>{{ list.kbi_access_count }}
                                    </p>
                                    <p class="color999 font-size11" style="margin-top: 7px;" v-if="type === 'popularity'">
                                        <em class="like-icon"></em>{{ list.s_cnt_like_count ? list.s_cnt_like_count : '0' }}
                                    </p>
                                </div>
                            </li>
                        </ul>
                        <div class="bottom-shadow" style="height: 1px;margin-top: -1px;" v-if="total > 0"></div>
                        <!--暂无数据-->
                        <div v-if="!isLoading && total === 0" style="height:100%;">
                            <div class="box-table" style="width:100%;height:100%;">
                                <div class="box-table-cell" style="text-align: center;">
                                    <div class="no-data">
                                        <img src="../../../static/images/no-data.png" alt=""/>
                                        <p class="color999">{{ $t('no_data') }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <common-loading :isLoading="isLoading"></common-loading>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
    </div>
</template>

<script>
import CommonLoading from '@/components/common/loading';
export default {
    name: 'KnowledgeRanking',
    components: {
        CommonLoading
    },
    data() {
        return {
            pageNo: 1, //分页页码
            knowledgeList: [], //知识列表
            total: 0,
            type: 'latest', //默认显示最新tab
            isLoading: true,
            onPulldownTopLock: false,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        selectSort(type) {
            this.knowledgeList = [];
            this.pageNo = 1;
            switch (type) {
            case 'latest':
                this.type = 'latest'; //最新
                break;
            case 'hottest':
                this.type = 'hottest'; //最热
                break;
            case 'popularity':
                this.type = 'popularity'; //赞
                break;
            };
            this.isLoading = true;
            this.getDataList();
        },
        onPulldownTop() {
            this.isRefresh = true;
            if (!this.onPulldownTopLock) {
                this.onPulldownTopLock = true;
                setTimeout(() => {
                    this.finished = false;
                    this.pageNo = 1;
                    this.getDataList('refresh');
                    this.isRefresh = false;
                }, 900);
            }
        },
        getDataList(option) { //列表请求方法
            this.$axios({
                method: 'POST',
                url: '/app/kb/center/index/' + this.type,
                params: {
                    pageNo: this.pageNo
                }
            }).then((res) => {
                if (res.data.rows && res.data.rows.length !== 0) {
                    if (option && option === 'refresh') {
                        this.knowledgeList = res.data.rows;
                    } else {
                        this.knowledgeList = [...this.knowledgeList, ...res.data.rows];
                    }
                }
                this.total = res.data.total;
                this.onPulldownTopLock = false;
                this.total = res.data.totalRecord;
                this.isLoading = false;
                this.pageNo++;
                if (this.knowledgeList.length >= this.total) {
                    this.finished = true;
                }
            });
        },
        detatilJump(id) {
            let kbiId = this.wbEncryptor(id);
            this.$router.push({path: `/knowledgeDetail/${kbiId}`});
        }
    },
    mounted() {
        //知识列表加载
        this.getDataList();
    }
};
</script>

<style scoped>
</style>
